<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_结构伪类1</title>
    <style>
        /* 选中div的第一个儿子标签 并且是p标签 看结构一 */
        /*div>p:first-child {*/
        /*  color: green;*/
        /*}*/

        /* 选中div的第一个儿子标签 如果儿子标签不是p标签的情况 看结构二 谁都不会被选中 */
        /*div>p:first-child {*/
        /*  color: green;*/
        /*}*/

        /* 选中div的第一个儿子标签 如果儿子标签不是p标签 但是其儿子儿子标签中有p标签并且是第一个儿子标签 这个p标签还是会被选中 看结构三 */
        /*div>p:first-child {*/
        /*  color: green;*/
        /*}*/

        /*   选中的第一个儿子标签并且该儿子标签是p标签的情况 都会被选中 看结构四*/
        p:first-child {
          color: green;
        }

    </style>
</head>
<body>
<!--    结构一 -->
<!--    <div>-->
<!--      <p>张三:98</p>-->
<!--      <p>李四:81</p>-->
<!--      <p>王五:71</p>-->
<!--      <p>赵六:66</p>-->
<!--    </div>-->

<!--结构二-->
<!--  <div>-->
<!--    <span>张三:98</span>-->
<!--    <p>李四:81</p>-->
<!--    <p>王五:71</p>-->
<!--    <p>赵六:66</p>-->
<!--  </div>-->

<!--结构三-->
<!--  <div>-->
<!--    <div>-->
<!--      <p>张三:98</p>-->
<!--    </div>-->
<!--    <p>李四:81</p>-->
<!--    <p>王五:71</p>-->
<!--    <p>赵六:66</p>-->
<!--  </div>-->

<!--结构四-->
  <p>测试</p>
  <div>
    <p>孙七:100</p>
    <div>
      <p>张三:98</p>
    </div>
    <p>李四:81</p>
    <p>王五:71</p>
    <p>赵六:66</p>
  </div>


</body>
</html>